<template>
  <el-dialog title="报警详情" width="600" style="height: 650px" @open="openClick()" @close="openClose1()"
    v-model="dialogVisible1">
    <div>
      <div class="title">
        <div class="titleItem">名称：</div>
        <div class="titleItem">检测项:</div>
      </div>

      <div class="inputbox">
        <div>
          <el-input class="input" v-model="inputName" disabled style="width: 240px" placeholder="请输入" clearable />
        </div>
        <el-input class="input" v-model="inputName0" disabled style="width: 240px" placeholder="请输入" clearable />
      </div>
    </div>
    <div>
      <div class="title">
        <div class="titleItem">报警时间：</div>
        <div class="titleItem">报警值:</div>
      </div>

      <div class="inputbox">
        <div>
          <el-date-picker disabled v-model="value1" type="datetime" placeholder="请输入" format="YYYY/MM/DD HH:mm:ss" size="20" style="width: 240px;" />
        </div>
        <div><el-input class="input" disabled v-model="inputName1" style="width: 240px" placeholder="请输入" clearable /></div>
      </div>
    </div>


    <div>
      <div style="width: 200px; color: #000;font-weight: 600;padding: 10px;margin-left: 30px;"><text>报警描述:</text></div>
      <div class="text">
        <el-input :input-style="{ width: '480px', height: '200px', borderColor: 'red' }" v-model="textarea2"
          style="width: 480px;" :rows="2" type="textarea" placeholder="请输入" />
      </div>
    </div>


    <div>
      <div class="title">
        <div class="titleItem">处理状态：</div>
        <div class="titleItem">处理人:</div>
      </div>

      <div class="inputbox">
        <div>
          <el-select v-model="value" clearable placeholder="未处理" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div><el-input class="input" v-model="inputName3" style="width: 240px" placeholder="请输入" clearable /></div>
      </div>
    </div>
    <div>
      <div class="title">
        <div class="titleItem">处理情况：</div>
        <div class="titleItem">处理时间:</div>
      </div>

      <div class="inputbox">
        <div><el-input class="input" v-model="inputName4" style="width: 240px" placeholder="请输入" clearable /></div>
        <div>
          <el-date-picker v-model="value1" type="datetime" placeholder="请输入" format="YYYY/MM/DD HH:mm:ss" size="20" style="width: 240px;"/>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="openClose1">确定</el-button>
        <el-button @click="openClose1">
          取消
        </el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script>
import bus from '../tools/eventBus'
export default {
  props: {
    httpUrl: String,
    tabsModelId: String,
    waterNameArr: Array,
    videUrl: String,
    dialogVisible: Boolean,
  },

  data() {
    return {
      value1: new Date(),
      value2: '',
      value: '',
      editableTabsValue: '1',
      dialogVisible1: true,
      inputName: '新汀大酒店对面',
      inputName3:'张三',
      Testing: '张三',
      inputTime: '2020-06-03-20 20:47:38',
      inputTime1: '2020-06-03-20 20:47:38',
      inputValue: '未处理',
      inputName0: '通讯中断',
      inputName1: '通讯中断',
      textarea2: '通讯中断',
      options: [{
        value: '选项1',
        label: '未处理'
      },{
        value: '选项2',
        label: '处理中'
      }, {
        value: '选项3',
        label: '审核中'
      }, {
        value: '选项4',
        label: '处理完成'
      }],
      
    }

  },
  mounted() {
    this.handleTablealveEvent()
    bus.on('Tablealve', (val) => {
        console.log(val,'val');
      })
  },
  methods: {
    handleTablealveEvent() {
      bus.on('Tablealve', (val) => {
        console.log(val,'val');
      })
  },
    openClick() {
      this.editableTabsValue = '1'
      this.$emit('openClick')
    },
    openClose1() {
      this.$emit('openClose')
    },
    tabClick(e) {
      this.$emit('tabClick', e)
    },
    tabTitleClick(e) {
      this.$emit('tabTitleClick', e)
    },

  },
  // mounted(){
   
  // }
  
}
</script>

<style>
.title {
  display: flex;
  justify-content: space-around;
}

.titleItem {
  text-align: left;
  width: 230px;
  padding: 10px;
  color: #000;
  font-weight: 600;
}

.inputbox {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.text {
  display: flex;
  flex-direction: column;
  /* 垂直排列子元素 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  height: 100%;
  /* 确保容器有足够的高度 */
}
</style>
